import React, { Component } from 'react';
import { connect } from 'dva';
import { Link, routerRedux } from 'dva/router';
import {
    WhiteSpace,
    WingBlank,
    Flex,
    Icon,
    ListView,
    Button,
    Modal
} from 'antd-mobile';

import NoLazyImg from "../../components/NoLazyImg/NoLazyImg";
import dianpusvg from "../../assets/img/dianpu.svg";
import rightsvg from "../../assets/img/right.svg";
import {Toast} from "antd-mobile/lib/index";

class NewAfterSaleItem extends Component {

    cancelOrder = (orderItem) => {
        this.props.router.push({
            pathname: '/applyAfterSale',
            state: {
                orderItem,
                type: 1 // type 1代表取消订单
            }
        })
//  Modal.alert('提示', '是否取消订单', [
//    { text: '取消' },
//    {
//      text: '确定',
//      onPress: () => {
//        orderApi.cancleorder({
//          ordersn: orderItem.orderSn
//        }).then(result => {
//          if (result.result == 1) {
//            // 取消成功
//            if (this.props.cancelOrder) {
//              this.props.cancelOrder();
//            }
//          }
//        })
//      }
//    },
//  ]);
    }

    gotoApply = (dataItem, goods) => {
        this.props.router.push({
            pathname: '/applyAfterSale',
            state: {
                orderItem: dataItem,
                goodsItem: goods,
                type: 2 // type 2代表申请售后
            }
        })
    }

    gotoOrderDetail = (goods) => {
        this.props.router.push('/orderDetail/' + goods.orderId)
    }

    render() {
        const { dataItem } = this.props;
        const value = dataItem;
        let orderStatus = '';
        let showCancelBtn = false;
        let showApplyBtn = false;
        var goodsState = "";

//         switch (dataItem.orderState) {
//             case 20:
//                 orderStatus = '等待发货'
//                 showCancelBtn = true;
//                 break;
// //    case 30:
// //      orderStatus = '已发货'
// //      showApplyBtn = true;
// //      break;
//             case 40:
//                 orderStatus = '已完成'
//                 showApplyBtn = true;
//                 break;
//         }

        switch (dataItem.refundState) {
            case 2:
                orderStatus = '处理中'
                showCancelBtn = true;
                break;
//    case 30:
//      orderStatus = '已发货'
//      showApplyBtn = true;
//      break;
            case 3:
                orderStatus = '已完成'
                showApplyBtn = true;
                break;
        }

        switch (dataItem.goodsState) {
            case 1:
                goodsState = '买家待发货'
                break;
            case 2:
                goodsState = '卖家待收货'
                break;
            case 3:
                goodsState = '卖家已收货'
                break;
            case 4:
                goodsState = '买家待收货'
                break;
            case 5:
                goodsState = '已完成'
                break;
            default:
                goodsState = "进行中"
        }


        // console.log(value, "单个数据。。。");
        // this.props.active == 1 ? 1 : this.props.active == 2 ? 2 : 0

        return <div className='orderitem'>
            { true || value.orderState==40 || value.orderState==30 ?
                (
                    <div  style={{marginBottom:".2rem",backgroundColor:"#fff"}}>
                        <Flex style={{backgroundColor:"#fff",padding:".2rem 0"}} justify="between">
                            <WingBlank>
                                <div>售后编号 : {value.barterSn || value.refundSn}</div>
                                <div style={{marginTop:".2rem"}}>申请售后时间 : {value.barterTime || value.refundTime}</div>
                            </WingBlank>
                            <WingBlank>
                                <span style={{color:"#ff0036"}}>{ this.props.active == 3 ? goodsState : orderStatus || '处理中' }</span>
                            </WingBlank>
                        </Flex>
                        <WingBlank >
                            {/* {value.orderGoodsEntityList.map((item,i)=>{
                if(value.orderGoodsEntityList.length>1){
                    return <NoLazyImg src={item.goodsImage} style={{width:"1.5rem",height:"1.5rem",marginRight:".2rem",padding:".2rem"}}  key={i} onClick={()=>{
                            console.log(value, "value");
                        this.props.dispatch(routerRedux.push({
                            pathname: `/orderDetail/${value.orderId}`,
                        }));
                    }}/>
                }else{
                    return <Flex justify="between" key={i} onClick={()=>{
                        console.log(value, "value");
                        this.props.dispatch(routerRedux.push({
                            pathname: `/orderDetail/${value.orderId}`,
                        }));
                    }}>
                        <Flex>
                            <NoLazyImg src={item.goodsImage} style={{width:"2rem",height:"2rem",marginRight:".2rem"}}/>
                            <div>
                                <p style={{lineHeight:".4rem"}}>{item.goodsName}</p>
                                <p style={{color:"#999"}}>数量 : x{value.goodsNum}</p>
                            </div>
                        </Flex>
                        <Icon type="right" />
                    </Flex>
                }
            })} */}
                            <Flex justify="between" onClick={() => {
                                console.log(value, "value");
                                this.props.dispatch(routerRedux.push({
                                    pathname: `/orderDetail/${value.orderId}`,
                                }));
                            }}>

                                <Flex style={{width: '90%'}}>
                                    <div style={{width:"2rem",height:"2rem",marginRight:".2rem"}}>
                                        <NoLazyImg src={value.goodsImage} style={{width:"2rem",height:"2rem"}}/>
                                    </div>

                                    <div>
                                        <p style={{lineHeight:".4rem"}}>{value.goodsName}</p>
                                        <p style={{color:"#999"}}>数量 : x{value.goodsNum}</p>
                                    </div>
                                </Flex>
                                <Icon style={{width:".3rem",height:".3rem"}} type="right" />

                            </Flex>
                        </WingBlank>
                        <Flex style={{backgroundColor:"#fff",padding:".2rem 0"}} justify="end">
                            <WingBlank>
                                {/* <div style={{padding:".1rem .15rem", color:"#ff0036",border:"1px solid #ff0036",borderRadius:"45px"}} onClick={()=>{
                this.props.dispatch(routerRedux.push({
                    pathname:`/applyAfterSale/${value.orderId}`
                }))
            }}>申请售后</div> */}


                                <div style={{padding:".1rem .15rem", color:"#ff0036",border:"1px solid #ff0036",borderRadius:"45px"}} onClick={()=>{
                                    console.log(this, this.props.active, "active...");
                                    this.props.dispatch(routerRedux.push({
                                        pathname:`/returnDetail/${[value.returnId || value.barterId || value.refundId, this.props.active == 1 ? 1 : this.props.active == 2 ? 2 : 0]}`
                                    }))
                                }}>查看进度</div>
                            </WingBlank>
                        </Flex>
                    </div>
                ):""
            }
        </div>
    }
}

export default connect(({ orderList }) => ({ orderList }))(NewAfterSaleItem);
